<script setup>
import { ref,defineProps } from 'vue'
const props = defineProps({
   bkg:{
       type:String,
       default:'/images/bkg2.jpg'
   },
   head:{
       type:String,
       default:'/default.jpg'
   }
})

</script>

<template>
    <div class="lin-card-head">
        <div class="bkg">
            <img :src="props.bkg" alt="">
        </div>
        <div class="head">
            <img :src="props.head" alt="">
        </div>
    </div>

</template>

<style lang="scss" scoped>
@keyframes cardIn {
    0% {
        transform: translate(0, -20%);
    }
    100% {
        transform: translate(0, 0);
    }
}

.lin-card-head {
    position: relative;
    min-width: 220px;
    width: 250px;
    height: 180px;
    border-radius: 5px;
    box-shadow: 0 0 2px rgba(0, 0, 0, .2);
    overflow: hidden;
    margin-bottom: 16px;
    animation: cardIn .5s ease-in-out;
    .bkg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
       img{
        width: 100%;
        height: 100%;
        object-fit: cover;
       }
    }
    .head{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        display: flex;
        background-color: #fff;
        justify-content: center;
        img{
            position: absolute;
            top:-30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid #fff;
            object-fit: cover;
        }
    }
}
</style>